<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="yes" name="apple-touch-fullscreen" />
  <meta content="telephone=no,email=no" name="format-detection" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>约会春天</title>
  <link rel="stylesheet" href="./index.css" />
  <script src="./js/vue.js"></script>
  <script src="./js/flex.js"></script>
</head>
<body>
  <div v-cloak id="app">
    <img class="bg" src="./images/bg@2x.png" width="100%" alt="">
    <p class="range">活动时间: 2020年4月13日至19日</p>
    <div class="gift box-1">
     <div class="title">好礼一.专属定制特权</div>
     <div class="inner">
       <p class="box-desc">活动期间,<span class="remind">魅力榜和富豪榜第一名的用户</span>,可获得个人专属靓号定制特权</p>
       <img class="box-1-img" src="./images/icon@2x.png" alt="">
       <p class="box-1-desc-1">个人专属靓号自定义特权</p>
       <p class="box-1-desc-2">自定义靓号可选: aabbcc或aaabbb</p>
     </div>
   </div>
   <div class="gift box-2">
    <div class="title">好礼二.超炫酷装扮</div>
    <div class="inner">
      <p class="box-desc">活动期间，用户<span class="remind">魅力值超过1888888</span>即可领取炫酷装扮</p>
      <div class="box-item">
        <div class="gift-img">
          <div class="new">NEW</div>
          <img src="./images/3.png" width="100%" alt="">
        </div>
        <p class="gift-desc">阳光沙滩头饰</p>
        <p class="gift-day remind">7天</p>
      </div>
      <div class="box-item">
        <div class="gift-img">
          <div class="new">NEW</div>
          <img src="./images/1.png" width="100%" alt="">
        </div>
        <p class="gift-desc">阳光沙滩气泡</p>
        <p class="gift-day remind">7天</p>
      </div>
      <div class="box-item">
        <div class="gift-img">
          <img src="./images/2.png" width="100%" alt="">
        </div>
        <p class="gift-desc">奥迪</p>
        <p class="gift-day remind">7天</p>
      </div>
      <div class="clearfix"></div>
      <p class="box-desc">活动期间，用户<span class="remind">富豪值超过1888888</span>即可领取炫酷装扮</p>
      <div class="box-item">
        <div class="gift-img">
          <div class="new">NEW</div>
          <img src="./images/3.png" width="100%" alt="">
        </div>
        <p class="gift-desc">阳光沙滩头饰</p>
        <p class="gift-day remind">7天</p>
      </div>
      <div class="box-item">
        <div class="gift-img">
          <div class="new">NEW</div>
          <img src="./images/1.png" width="100%" alt="">
        </div>
        <p class="gift-desc">阳光沙滩气泡</p>
        <p class="gift-day remind">7天</p>
      </div>
      <div class="box-item">
        <div class="gift-img">
          <img src="./images/4.png" width="100%" alt="">
        </div>
        <p class="gift-desc">兰博基尼</p>
        <p class="gift-day remind">7天</p>
      </div>
    </div>
   </div>
   <div class="gift box-3">
    <div class="title">好礼三.顶级厅靓号</div>
    <div class="inner">
      <p class="box-desc">根据活动期间厅的魅力值,厅总<span class="remind">魅力榜第1-3名</span>,领取平台顶级靓号</p>
       <img class="box-3-img" src="./images/roomicon@2x.png" alt="">
       <p class="box-1-desc-1">专属厅靓号自定义特权</p>
       <p class="box-1-desc-2">自定义靓号可选: aabbb或aaabb</p>
    </div>
   </div>
   <div class="gift ranking">
    <div class="title">排行榜</div>
    <div class="inner">
      <ul>
        <li :class="query.type === 0 ? 'active-btn' : ''" @click="toggle(0)">魅力榜</li>
        <li :class="query.type === 1 ? 'active-btn' : ''"  @click="toggle(1)">富豪榜</li>
        <li :class="query.type === 2 ? 'active-btn' : ''" @click="toggle(2)">厅魅力榜</li>
      </ul>
      <table>
        <thead>
          <tr>
            <td>排名</td>
            <td>{{ query.type === 2 ? '封面' : '头像' }}</td>
            <td>昵称和ID</td>
            <td>{{ query.type === 1 ? '富豪值' : '魅力值' }}</td>
          </tr>
        </thead>
        <tbody>
          <tr v-if="query.type === 0" v-for="(item, index) in lists" :key="query.type + '-' + index">
            <td :class="index === 0 || index === 1 || index === 2 ? 'before-three' : ''">{{index + 1}}</td>
            <td>
              <img class="head-img" :src="item.images[0]" alt="">
            </td>
            <td>
              <p>{{item.nickname}}</p>
              <p>ID:{{item.user_uid}}</p>
            </td>
            <td>
              <p>{{item.total_charm_value}}</p>
            </td>
          </tr>
          <tr v-if="query.type === 1" v-for="(item, index) in lists" :key="query.type + '-' + index">
            <td :class="index === 0 || index === 1 || index === 2 ? 'before-three' : ''">{{index + 1}}</td>
            <td>
              <img class="head-img" :src="item.images[0]" alt="">
            </td>
            <td>
              <p>{{item.nickname}}</p>
              <p>ID:{{item.user_uid}}</p>
            </td>
            <td>
              <p>{{item.wealth_balance}}</p>
            </td>
          </tr>
          <tr v-if="query.type === 2" v-for="(item, index) in lists" :key="query.type + '-' + index">
            <td :class="index === 0 || index === 1 || index === 2 ? 'before-three' : ''">{{ index + 1 }}</td>
            <td>
              <img class="head-img" :src="item.image" alt="">
            </td>
            <td>
              <p>{{ item.name}}</p>
              <p>ID:{{item.room_uid}}</p>
            </td>
            <td>
              <p>{{ item.total_wealth_value}}</p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
   </div>
   <p class="desc">活动说明:</p>
   <p class="desc">1、活动所有奖励将于活动结束后三个工作日之内联系发放</p> 
   <p class="desc">2、本活动所有18岁以上的用户均可参加。本活动最终解释权归声撩APP所有，本活动与苹果无关。</p>
  </div>
</body>
<script src="./js/tool.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      baseUrl: 'http://47.103.212.118:5084', // 测试服',
      apiurl: '',
      query: {
        type: 1
      },
      lists: [],
      date: ""
    },
    computed: {
      beCalledLen: function() {
        return this.lists.length;
      },
      qrcodeUrl: function(){
        return this.baseUrl + "/zhaoji/share.html";
      },
      textUrl: function(){
        return this.baseUrl + "/zhaoji/share.html";
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        let _this = this
        try{
          kk.ajaxGet("./config.json", {}, function(res) {
            let {devUrl, proUrl, localUrl, env, apiUrl} = res
            kk.env = env
            _this.apiUrl = apiUrl
            if(env === "dev") {
              _this.baseUrl = devUrl
            } else if(env === "production"){
              _this.baseUrl = proUrl
            } else if(env === "local") {
              _this.baseUrl = localUrl
            }
            _this.toggle(0)
          })
        }catch(error) {
          alert(error)
        }
      },
      toggle(type) {
        this.query.type = type
        this.getRanking()
      },
     
      getRanking(){
        let _this = this
        let route = ["/finance/charm_charts", "/finance/wealth_charts", "/finance/room_self_wealth_charts"][this.query.type]
        
        kk.get(_this.apiUrl + route, { type: 2, page_size: 30, user_id: kk.$_GET['user_id'] }, function(res) {
          if(kk.env === "production") {
            res = kk.parseBase64(res)
          }
          let { code ,data } = res
          _this.lists = data.list
          // _this.date = data.date
        })
      }
    }
  })
</script>
</html>